<page-header autoTitle="false" />

<nz-card nzTitle="数据库列表管理" [nzExtra]="cardExtra">
  <st #st [data]="rows" [columns]="columns" [expand]="expand" [ps]="20" size="small" expandRowByClick expandAccordion>
    <ng-template #expand let-item let-index="index" let-column="column">
      <sv-container size="small" col="3">
        <sv-title>更多内容</sv-title>
        <sv label="大小写" type="success">{{ item!.supportCase }}</sv>
        <sv label="Jdbc链接格式">{{ item!.jdbcFormat }}</sv>
        <sv label="Jdbc驱动">{{ item!.driverClassName }}</sv>
        <sv label="表脚本">{{ item!.scriptTable }}</sv>
        <sv label="列脚本">{{ item!.scriptColumn }}</sv>
        <sv label="约束脚本">{{ item!.scriptConstraint }}</sv>
        <sv label="官方文档">{{ item!.docUrl }}</sv>
        <sv label="创建人">{{ item!.createdBy }}</sv>
        <sv label="创建时间">{{ item!.createdDate }}</sv>
      </sv-container>
    </ng-template>
  </st>
</nz-card>
<ng-template #cardExtra>
  <button nz-button nzType="primary" (click)="add()" [nzLoading]="isLoading"> <i nz-icon nzType="plus-circle"></i> 新建</button>
</ng-template>

<nz-drawer
  [nzSize]="drawerOption.size"
  [nzVisible]="drawerOption.visible"
  [nzTitle]="drawerOption.title"
  nzPlacement="right"
  [nzExtra]="drawerTemplate"
  (nzOnClose)="closeDrawer()"
>
  <ng-container *nzDrawerContent>
    <form nz-form [formGroup]="tForm">
      <nz-form-item>
        <nz-form-label nzFor="dataBase" nzRequired>数据库类型</nz-form-label>
        <nz-form-control nzErrorTip="Please input your dataBase">
          <input formControlName="dataBase" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="ability" nzRequired>用途类型</nz-form-label>
        <nz-form-control nzErrorTip="Please input your ability">
          <nz-select formControlName="ability" name="ability" nzPlaceHolder="" nzAllowClear>
            <nz-option [nzLabel]="'OLTP'" [nzValue]="'OLTP'" />
            <nz-option [nzLabel]="'OLAP'" [nzValue]="'OLAP'" />
            <nz-option [nzLabel]="'HTAP'" [nzValue]="'HTAP'" />
            <nz-option [nzLabel]="'NOSQL'" [nzValue]="'NOSQL'" />
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="remark" nzRequired>数据库描述</nz-form-label>
        <nz-form-control nzErrorTip="Please input your remark">
          <input formControlName="remark" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="supportVersion">支持版本</nz-form-label>
        <nz-form-control nzErrorTip="Please input your supportVersion">
          <input formControlName="supportVersion" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="jdbcFormat">Jdbc链接格式</nz-form-label>
        <nz-form-control nzErrorTip="Please input your jdbcFormat">
          <input formControlName="jdbcFormat" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="driverClassName">驱动名称</nz-form-label>
        <nz-form-control nzErrorTip="Please input your driverClassName">
          <input formControlName="driverClassName" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="docUrl">官方文档</nz-form-label>
        <nz-form-control nzErrorTip="Please input your docUrl">
          <input formControlName="docUrl" nz-input placeholder="" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="supportCase">大小写</nz-form-label>
        <nz-form-control nzErrorTip="Please input your supportCase">
          <nz-select formControlName="supportCase" name="ability" nzPlaceHolder="" nzAllowClear>
            <nz-option [nzLabel]="'lower'" [nzValue]="'lower'" />
            <nz-option [nzLabel]="'upper'" [nzValue]="'upper'" />
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="scriptTable">表脚本</nz-form-label>
        <nz-form-control nzErrorTip="Please input your scriptTable">
          <ngx-codemirror
            formControlName="scriptTable"
            [options]="{
              lineNumbers: true,
              theme: 'idea',
              mode: 'sql',
              height: '500'
            }"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="scriptColumn">列脚本</nz-form-label>
        <nz-form-control nzErrorTip="Please input your scriptColumn">
          <ngx-codemirror
            formControlName="scriptColumn"
            [options]="{
              lineNumbers: true,
              theme: 'idea',
              mode: 'sql',
              height: '500'
            }"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzFor="scriptConstraint">约束脚本</nz-form-label>
        <nz-form-control nzErrorTip="Please input your scriptConstraint">
          <ngx-codemirror
            formControlName="scriptConstraint"
            [options]="{
              lineNumbers: true,
              theme: 'idea',
              mode: 'sql',
              height: '500'
            }"
          />
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-drawer>
<ng-template #drawerTemplate>
  <button nz-button nzType="default" (click)="closeDrawer()">关闭</button>
  <button nz-button nzType="primary" (click)="save()" [nzLoading]="isLoading" [disabled]="tForm.invalid">
    <i nz-icon nzType="save"></i> 保存</button
  >
</ng-template>
